<template>
  <div class="home">
    <!-- 头部搜索 -->
    <div class="home_head">
      <img class="inp_img" src="../assets/img/search@2x.png" alt />
      <input @focus="goSearch" class="head_inp" type="text" placeholder="搜索你的需要" />
      <img @click="goMyPage" :src="userImg" alt class="head_img" />
    </div>
    <!-- 滚动区 -->
    <scroll
      class="content"
      ref="scroll"
      :probe-type="1"
      @touchEnd="touchEnd"
      :pull-up-load="true"
      :maxHeight="82"
      @scroll="contentScroll"
    >
      <div>
        <!-- 轮播图 --> 
        <!-- :autoplay="3000" -->
        <div class="home_banner">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerList" :key="item.id" style="height:100%">
              <img class="banner_img" :src="item.image" :alt="item.title" />
            </van-swipe-item> 
          </van-swipe>
        </div>
        <!-- 系统公告 -->
        <div class="home_notice">
          <div class="notice_fl">
            <img class="notice_fl_img" src="../assets/img/gonggao@2x.png" alt />
            <span>系统公告</span>
          </div>
          <div class="notice_fr">
            <van-notice-bar
              class="van-notice-bar"
              scrollable
              color="#999"
              background="#fff"
              :text="notice.con"
            />
          </div>
        </div>

        <!-- 图片导航 -->
        <div class="nav_list">
          <div class="nav_list_top">
            <div class="list_top_fl" @click="standing('jc')">
              <div class="top_fl_jc">
                <span>精彩365</span>
                <span>立即查看</span>
              </div>
              <img src="../assets/img/jing@2x.png" alt />
            </div>
            <div class="list_top_fr">
              <div style="position: relative" @click="standing('zf')">
                <div class="top_fl_jc" style="color:#599BFA">
                  <span>业务留言</span>
                  <span style="background: #599BFA">立即查看</span>
                </div>
                <img src="../assets/img/shang@2x.png" alt />
              </div>
              <div style="position: relative" @click="standing('sp')">
                <div class="top_fl_jc" style="color: #746CFE">
                  <span>商品链接</span>
                  <span style="background: #746CFE">立即查看</span>
                </div>
                <img src="../assets/img/zhang@2x.png" alt />
              </div>
            </div>
          </div>
          <div class="nav_list_ban" @click="goVideo"></div>
        </div>

        <!-- 底部商品选择详情 -->
        <div class="product">
          <!-- 上方导航 -->
          <div class="product_list">
            <span @click="goGoodsVideo">综合精品</span>
            <!-- <img class="product_img" src="../assets/img/gengduo@2x.png" alt /> -->
            <div class="wrapper" ref="wrapper">
              <ul class="product_item" :style="sliderStyle">
                <li
                  v-for="(item,index) in cateVideoArr"
                  @click="classDetail(item.course_id,index)"
                  :class="isShowNav == index? 'isShowNav':''"
                  :key="index"
                >{{item.course_name}}</li>
              </ul>
            </div>
          </div>
          <!-- 下方详情 -->
          <ul class="product_deta">
            <li
              class="product_deta_item"
              @click="goVideoDetail(item.chapter_id)"
              v-for="(item,index) in cateVideoList"
              :key="index"
            >
              <!-- @load="imgLoad" -->
              <img class="deta_item_img" :src="item.chapter_avatar" alt />
              <div class="deta_item_fr">
                <h2 class="fr_h2">{{item.chapter_name}}</h2>
                <span class="fr_sp" v-html="item.desc"></span>
                <div class="fr_con">
                  <div class="con_fl"></div>
                  <span>{{item.create_time}}</span>
                </div>
              </div>
            </li>
            <li class="isShowTit" v-show="isShowTit">暂无更多数据</li>
          </ul>
        </div>
      </div>
    </scroll>
    <BackTop @click.native="clickTop" v-show="isShowBackTop"></BackTop>
    <MainTabBar></MainTabBar>
  </div>
</template>

<script>
import Bscroll from "better-scroll";
import Scroll from "../components/common/scroll/Scroll";
// 防抖函数
import { throtTling } from "../utils/throttling.js";
import MainTabBar from "../components/content/MainTabBar";
import moment from "moment";
// api请求
import {
  getCarouselList,
  getNotice,
  getCourseList,
  getCateVideo,
  getGoodsVide,
} from "../api/home";

export default {
  name: "Home",
  components: {
    Scroll,
    MainTabBar,
  },
  data() {
    return {
      // 轮播图数据
      bannerList: "",
      current:'0',
      // 用户头像
      userImg: "",
      // 公告数据
      notice: "",
      // 导航栏状态 是否精品
      isStatus: true,
      courseList: "",
      // 是否显示暂无数据
      isShowTit: false,
      // 返回顶部
      isShowBackTop: false,
      // 当前ID
      currentId: "",
      cateVideoList: [],
      cateVideoArr: [],
      isShowNav: 0,
      // 每页几条数据
      limit: 5,
      // 页数
      page: 1,
      // 精品课程
      goodsVideoList: "",
      // 动态改变父元素的宽度
      sliderStyle: {
        width: "",
      },
    };
  },
  methods: {
    standing(type) {
      if (type == "jc") {
        this.$router.push("/wonderful");
      } else if (type == "sp") {
        this.$router.push({ path: "/commodity", query: { tyle: "sp" } });
      } else {
        this.$router.push("/leaveMsg");
      }
    },
    // 点击搜索跳转页面
    goSearch() {
      this.$router.push({ name: "Search" });
    },
    // 跳转视频页
    goVideo() {
      this.$router.push("/video");
    },
    // 跳转到我的页面
    goMyPage() {
      this.$router.push({ name: "My" });
    },
    // 点击导航查看详情
    classDetail(id, index) {
      this.isShowNav = index;
      this.currentId = id;
      this.isStatus = false;
      this.page = 1;
      this.isShowTit = false; 
      getCateVideo(id, this.limit, this.page).then((res) => {
        if (res.code == 200) {
          this.cateVideoList = res.data.data; 
        } else {
          this.$toast({
            duration: 2000,
            message: res.msg,
          });
        }
      });
    },
    // 获取数组第一条id
    courseListArr(info) {
      Object.keys(info).forEach((key) => {
        this.cateVideoArr.push(info[key]);
      });
      // 根据列表数据动态的设置ul宽度
      this.sliderStyle.width = this.cateVideoArr.length * 1.4 + "rem";
    },
    // 批量获取首页数据
    getHomeData() {
      let that = this;
      that.axios.all([getCarouselList(), getNotice(), getCourseList(5)]).then(
        that.axios.spread((res, city, cours) => {
          if (res.code == 200 && city.code == 200 && cours.code == 200) {
            (that.bannerList = res.data),
              (that.notice = city.data),
              (that.courseList = cours.data),
              that.courseListArr(that.courseList);
          }
        })
      );
    },
    // 精品视频
    goGoodsVideo() {
      let that = this;
      that.isStatus = true;
      that.page = 1;
      that.isShowNav = -1
      getGoodsVide(that.limit, that.page).then((res) => {
        if (res.code == 200) {
          // 每次将数据push新数组
          // that.cateVideoList.push(...res.data.data);
          that.cateVideoList = res.data.data
        } else {
          that.$toast({
            duration: 1000,
            message: res.msg,
          });
        }
      });
    },
    // 点击进入视频详情
    goVideoDetail(id) {
      this.$router.push({ name: "VideoDetail", query: { id } });
    },
    // 监听滚动
    contentScroll(position) {
      if (position.y < -500) {
        this.isShowBackTop = true;
      } else {
        this.isShowBackTop = false;
      }
    },
    // 下拉刷新
    refresh() {
      (this.page = 1),
        this.$toast({
          duration: 1000,
          message: "刷新成功",
        });
      this.$refs.scroll.finishPullUp();
    },
    // 上拉加载
    touchEnd: throtTling(function (y) {
      // 如果上拉操作并且 isShowTit 为 false
      if (y < -200 && !this.isShowTit) {
        // 上拉加载更多
        let pages;
        // 如果是精品推荐
        if (this.isStatus) {
          // 调用请求数据的方法 获取当前页下一批数据
          pages = this.page += 1;
          getGoodsVide(this.limit, pages).then((res) => {
            if (res.code == 200) {
              // 每次将数据push新数组
              this.cateVideoList.push(...res.data.data);
              this.page += 1;
              this.isShowTit = false;
            } else {
              this.isShowTit = true;
            }
          });
        } else {
          // 点击导航查看详情
          pages = this.page += 1;
          this.isStatus = false;
          getCateVideo(this.currentId, this.limit, pages).then((res) => {
            if (res.code == 200) {
              this.cateVideoList.push(...res.data.data);
              this.page += 1;
            } else {
              this.isShowTit = true;
            }
          });
        }
        // 每次数据加载完成之后加载 finishPullUp() 方法，代表上一次上拉事件完成，
        this.$refs.scroll.finishPullUp();
        // 重新计算高度
        this.$refs.scroll.refresh();
      }
    }, 2000),
    // 返回顶部
    clickTop() {
      this.$refs.scroll.scrollTo(0, 0);
    },
  },
  mounted() {
    // 批量获取首页数据
    this.getHomeData();
    // 获取精品课程视频
    this.goGoodsVideo();
    // 初始化滑动
    this.$nextTick(() => {
      new Bscroll(this.$refs.wrapper, {
        scrollX: true,
        click: true,
      });
    });
    // 本地获取用户头像
    this.userImg = window.localStorage.getItem("userImg");
  },
};
</script>

<style lang="less" scoped>
.home {
  margin: 0 0.4rem;
  height: calc(100vh - 1.333rem);
}
// 头部搜索
.home_head {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  height: 0.826667rem;
  background: #fff;
  .inp_img {
    position: absolute;
    top: 0.586667rem;
    left: 0.24rem;
    width: 0.4rem;
    height: 0.4rem;
  }
  .head_inp {
    padding-left: 1.066667rem;
    width: 6.4rem;
    height: 100%;
    color: #2c2c2c;
    font-size: 0.32rem;
    background: #f6f6f6;
    border-radius: 0.373333rem;
  }
  .head_img {
    margin: 0.08rem;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background: url("../assets/img/zhanghao@2x.png") no-repeat;
    background-size: 100% 100%;
  }
}
// 轮播图
.home_banner {
  height: 4.32rem;
  .my-swipe {
    height: 100%;
    .banner_img {
      width: 100%;
      height: 100%;
    }
  }
}
// 系统公告
.home_notice {
  display: flex;
  height: 1.493333rem;
  line-height: 1.493333rem;
  background: #fff;
  .notice_fl {
    position: relative;
    width: 2.933333rem;
    color: #282e36;
    font-size: 0.32rem;
    font-weight: 700;
    .notice_fl_img {
      margin: 0 0.186667rem;
      width: 0.733333rem;
      height: 0.733333rem;
    }
  }
  .notice_fl::after {
    position: absolute;
    top: 0.48rem;
    right: 0.266667rem;
    content: "";
    width: 0.04rem;
    height: 0.426667rem;
    background: #7077fb;
  }
  .notice_fr {
    flex: 1;
    overflow: hidden;
    .van-notice-bar {
      margin-top: 0.48rem;
      font-size: 0.426667rem;
    }
  }
}
// 图片导航
.nav_list {
  margin: 0.133333rem 0;
  padding: 0.426667rem 0;
  background: #fff;
  .nav_list_top {
    display: flex;
    .list_top_fl,
    .list_top_fr {
      flex: 1;
    }
    .list_top_fl,
    .list_top_fr {
      position: relative;
      margin-right: 0.133333rem;
      img {
        width: 100%;
        height: 100%;
      }
      .top_fl_jc {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        top: 0.693333rem;
        left: 0.586667rem;
        color: #fe7260;
        font-size: 0.533333rem;
        height: 1.333333rem;
        & span:nth-child(2) {
          display: flex;
          padding-left: 0.266667rem;
          width: 1.626667rem;
          height: 0.613333rem;
          line-height: 0.613333rem;
          color: #fff;
          font-size: 0.32rem;
          background: #fe7260;
          border-radius: 0.133333rem;
        }
      }
    }
    .list_top_fr {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      div {
        margin-bottom: 0.133333rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .nav_list_ban {
    margin-top: 0.56rem;
    height: 2.373333rem;
    background: url("../assets/img/meitian@2x.png") no-repeat;
    background-size: 100% 100%;
  }
}
// 底部商品展示详情
.product {
  padding-bottom: 0.266667rem;
  background: #fff;
  .product_list {
    position: relative;
    display: flex;
    height: 1.84rem;
    line-height: 1.84rem;
    span {
      width: 2.4rem;
      font-size: 0.506667rem;
      color: #647cfa;
      font-weight: 700;
    }
    .product_item {
      overflow: hidden;
      font-size: 0.4rem;
      color: #333333;
      li {
        float: left;
        padding: 0 0.266667rem;
        height: 100%;
      }
    }
    .wrapper {
      width: 6.666667rem;
      overflow: hidden;
    }
    .product_img {
      position: absolute;
      right: 0.8rem;
      top: 0.32rem;
      width: 0.36rem;
      height: 1.066667rem;
    }
  }
  .product_deta {
    .product_deta_item {
      display: flex;
      justify-content: space-between;
      margin-top: 0.266667rem;
      .deta_item_img {
        width: 3.48rem;
        height: 3rem;
      }
      .deta_item_fr {
        margin-left: 0.266667rem;
        flex: 1;
        font-size: 0.293333rem;
        color: #6a6f72;
        .fr_h2 {
          margin: 0.266667rem 0;
          font-size: 0.346667rem;
          color: #282e36;
        }
        .fr_sp {
          width: 5.333333rem;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .fr_con {
          display: flex;
          justify-content: space-between;
          margin-top: 0.106667rem;
          height: 0.533333rem;
          .con_fl {
            color: #ff6801;
            .con_fl_img {
              margin-right: 0.133333rem;
              width: 0.293333rem;
              height: 0.293333rem;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}

.list_top_fr .top_fl_jc {
  top: 0.133333rem !important;
}
 
</style>
